﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../js/plugins/bootstrap-multiselect/bootstrap-multiselect.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../weixin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/plugins/bootstrap-multiselect/bootstrap-multiselect.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tableToExcel.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/extTools.js"></script>
		<style type="text/css">
			html {
				overflow: hidden
			}
			
			td.details-control {
				background: url('../images/details_open.png') no-repeat center center;
				cursor: pointer;
			}
			
			tr.shown td.details-control {
				background: url('../images/details_close.png') no-repeat center center;
			}
			
			.textcenter {
				text-align: center;
			}
			
			.screening {
				display: flex;
				display: -webkit-flex;
			}
			
			.left-top {
				/*min-width: 600px;*/
				width: 40%;
			}
			
			.middle-box {
				width: 35%;
			}
			
			.right-box {
				width: 23%;
				position: relative;
			}
			
			.right-top {
				width: 5%;
			}
			
			#example th td {
				text-align: center !important;
				vertical-align: middle !important;
			}
			
			.table>tbody>tr>td,
			.table>thead:first-child>tr:first-child>th {
				text-align: center !important;
				vertical-align: middle !important;
			}
			
			.btntogle {
				/*background: url(../images/details_open.png) no-repeat right;*/				
			}
			.btntogle2{
				min-width: 185px;
				display: flex;
				display: -webkit-flex;
				justify-content: flex-start;
				-webkit-justify-content: flex-start;
			}
			.sontable {
				display: none;
			}
			
			.ProvinceCss {
				height: 100%;
				text-align: left;
			}
			
			.sontableheight td {
				padding: 0 !important;
			}
			
			.sontableheight td div,
			.sontable th {
				text-align: center;
				vertical-align: middle;
			}
			
			#example2 tbody td {
				padding: 0 !important;
				text-align: center;
				vertical-align: middle;
			}
			
			.listbox {
				font-size: 12px;
				text-align: center;
				vertical-align: middle !important;
			}
			
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.pagination {
				position: relative;
			}
			
			.pagination li {
				display: inline-block;
				margin: 0 5px;
			}
			
			.pagination li a {
				padding: .5rem 1rem;
				display: inline-block;
				border: 1px solid #ddd;
				background: #fff;
				color: #0E90D2;
			}
			
			.pagination li a:hover {
				background: #eee;
			}
			
			.pagination li.active a {
				background: #0E90D2;
				color: #fff;
			}
			/*label {
				max-width: 70%;
			}*/
			
			.form-group {
				padding: 0 !important;
			}
			
			.firsttableheader {
				text-align: center;
				vertical-align: middle;
			}
			
			.text-color-green {
				color: green;
			}
			
			.text-color-orange {
				color: orange;
			}
			
			.label1 {
				width: 85px !important;
				text-align: right;
			}
			
			select {
				width: 50% !important;
			}
			
			.tdcenter {
				text-indent: 20px;
			}
			
			.breadcrumb {
				padding-top: 0;
				padding-bottom: 0;
			}
			
			.pagination {
				margin: 15px 0 0 0;
			}
			
			#example td {
				padding: 0 !important;
			}
		</style>
	</head>

	<body>
		<div id="km">
			<ol class="breadcrumb" style="margin: 0px;">
				<li>
					<span>筛选条件</span>
				</li>
			</ol>
			<div class="selectheader" style="min-width: 1140px;width:100%margin: 0px;">
				<div class="screening">
					<div class="left-top">
						<form class="form-inline row" role="form" id="form1" style="margin-bottom: 5px;">
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
								<label for="name" class="label1" style="width: 85px !important;">供应商：<span style="color:red">*</span></label>
								<select id="VendCustID" multiple="multiple" style="display: none;">
								</select>
							</div>
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
								<label for="name" class="label1" style="width: 50px !important;">省份：</label>
								<select id="OperationAreaList" multiple="multiple" style="display: none;">
								</select>
							</div>
						</form>
						<form class="form-inline row" role="form" id="form2">
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding: 0px;">
								<label for="name" class="label1">年份：<span style="color:red">*</span></label>
								<select class="form-control" v-model="yearselected">
									<option></option>
									<option v-for="option in PeriodYearList" v-bind:value="option.PeriodYear">
										{{ option.PeriodYear }}
									</option>
								</select>
							</div>
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
								<label for="name" style="width: 50px !important;" class="label1">季节：</label>
								<select id="seasonID" multiple="multiple" style="display: none;">
								</select>
							</div>
						</form>
					</div>
					<div class="middle-box">
						<form action="" class="form-inline row" style="margin-bottom: 5px;">
							<div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-5">
								<label for="name" class="label1">日期：</label>
								<input type="text" id="test0" class="form-control" style="width: 50%;padding-left:5px;padding-right: 5px;" />
							</div>
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding: 0 !important;">
								<label for="name" style="text-align: center !important;width: 50px !important;" class="label1">至</label>
								<input type="text" id="test1" class="form-control" style="width: 50%;" />
							</div>
						</form>
						<form action="" class="form-inline row">
							<div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-5">
								<label for="name" class="label1">系列：</label>
								<select class="form-control" v-model="seriesselected" id="seriesID">
									<option></option>
									<option v-for="option in MatSeriesList" v-bind:value="option.SeriesName" v-bind:SeriesID="option.SeriesID">
										{{ option.SeriesName }}
									</option>
								</select>
							</div>
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
								<label for="name" style="width: 50px !important;" class="label1">品类：</label>
								<select style="display: none;" id="modelID" multiple="multiple">
								</select>
							</div>
						</form>

					</div>
					<div class="right-box">
						<form action="" class="form-inline">
							<div class="form-group">
								<div class="" style="margin-bottom: 5px;">
									<input type="button" class="btn btn-primary btn-sm " id="query" value="查询" />
								</div>
								<label for="name" class="">关键字：</label>
								<input type="text" class="form-control" style="width: 63%;padding-left: 0;padding-right: 0;" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" id="materialID" placeholder="货号/工厂编号以,分开">
							</div>
						</form>
					</div>
				</div>
			</div>

			<div style="margin-top: 5px; margin-left: 5px">
				<table border="1" id="exportReportTotal" title="全国销售汇总表" data-excelTitle="销售汇总" hidden="hidden" style="display:none">
					<thead id="exTable_headTotal">
					</thead>
					<tbody id="exTable_bodyTotal">
					</tbody>
				</table>
				<table border="1" id="exportReport" title="省份销售汇总明细" hidden="hidden" style="display:none">
					<thead id="exTable_head">
					</thead>
					<tbody id="exTable_body">
					</tbody>
				</table>
				<table border="1" id="exportReportDetail" title="销售明细" style="display:none">
					<thead id="exTable_headDetail">
					</thead>
					<tbody id="exTable_bodyDetail">
					</tbody>
				</table>
			</div>

			<div class="father-and-son-table">
				<ol class="breadcrumb" style="margin:0">
					<li>
						<span>分仓及店仓明细(点击</span><img src="../images/details_open.png" /><span>看店仓明细)</span>
					</li>
				</ol>
				<ul class="nav nav-pills">
					<li v-bind:class="classObject" @click="changtable(0)">
						<a href="#">销售汇总</a>
					</li>
					<li v-bind:class="classObject1" @click="changtable(1)">
						<a href="#">销售明细</a>
					</li>
					<li style="float: right;">
						<button type="button" class="btn btn-primary" id="relaodbtns" onclick='tableToExcelMethod(exportReportTotal,exportReport)'>导出销售汇总</button>
						<button type="button" class="btn btn-primary" id="relaodbtns2" onclick='exportReportDetail()' style="display:none;">导出销售明细</button>
					</li>
				</ul>
				<table cellspacing="0" width="100%" v-if="classObject.active" style="margin:0;" class="table table-striped">
					<thead style="background-color: #337ab7;color: white;">
						<tr>
							<th class="firsttableheader MaterialID" :style="{ 'min-width': '185px', width: tdStyleLeft.MaterialID + 'px' }">货号</th>
							<th class="firsttableheader FactoryNo" :style="{ 'min-width': '50px', width: tdStyleLeft.FactoryNo + 'px' }">工厂编号</th>
							<th class="firsttableheader VendCustName" :style="{ 'min-width': '50px', width: tdStyleLeft.VendCustName + 'px' }">供应商</th>
							<th class="firsttableheader DataText" :style="{ 'min-width': '50px', width: tdStyleLeft.DataText + 'px' }">范围</th>
							<th class="firsttableheader SaleDate" :style="{ 'min-width': '90px', width: tdStyleLeft.SaleDate + 'px' }">上市日期</th>
							<th class="firsttableheader SaleRate" :style="{ 'min-width': '70px', width: tdStyleLeft.SaleRate + 'px' }">售罄率</th>
							<th class="firsttableheader RowNumber" :style="{ 'min-width': '70px', width: tdStyleLeft.RowNumber + 'px' }">同品类销售排名</th>
							<th class="firsttableheader SaleAmount" :style="{ 'min-width': '70px', width: tdStyleLeft.SaleAmount + 'px' }">销售金额</th>
							<th class="firsttableheader Discount" :style="{ 'min-width': '50px', width: tdStyleLeft.Discount + 'px' }">销售折扣</th>
							<th class="firsttableheader SaleQty" :style="{ 'min-width': '50px', width: tdStyleLeft.SaleQty + 'px' }">销售数量</th>
							<th class="firsttableheader CostPrice" :style="{ 'min-width': '50px', width: tdStyleLeft.CostPrice + 'px' }">成本价</th>
							<th class="firsttableheader StockQty" :style="{ 'min-width': '50px', width: tdStyleLeft.StockQty + 'px' }">当前仓存</th>
							<th class="firsttableheader ShopQty">当前店存</th>
						</tr>
					</thead>
				</table>
				<table cellspacing="0" width="100%" v-if="classObject1.active" style="margin:0" class="table table-striped">
					<thead style="background-color: #337ab7;color: white;">
						<tr>
							<th class="listbox" :style="{ 'min-width': '65px', width: tdStyleRight.Province + 'px' }">省份</th>
							<th class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.FactoryNo + 'px' }">工厂编号</th>
							<th class="listbox" :style="{ 'min-width': '150px', width: tdStyleRight.StockName + 'px' }">仓库</th>
							<th class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.StockType + 'px' }">仓库类型</th>
							<th class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.ShopType + 'px' }">店铺性质 </th>
							<th class="listbox" :style="{ 'min-width': '150px', width: tdStyleRight.VendCustName + 'px' }">供应商</th>
							<th class="listbox" :style="{ 'min-width': '100px', width: tdStyleRight.MaterialID + 'px' }">货号</th>
							<th class="listbox" :style="{ 'min-width': '50px', width: tdStyleRight.CostPrice + 'px' }">成本价</th>
							<th class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.ColorName + 'px' }">颜色</th>
							<th :style="{ 'min-width': '40px', width: tdStyleRight.SizeName + 'px' }">尺码</th>
							<th :style="{ 'min-width': '65px', width: tdStyleRight.SaleDate + 'px' }">上市日期</th>
							<th :style="{ 'min-width': '40px', width: tdStyleRight.SaleAmount + 'px' }">销售金额</th>
							<th :style="{ 'min-width': '40px', width: tdStyleRight.Discount + 'px' }">销售折扣</th>
							<th :style="{ 'min-width': '40px', width: tdStyleRight.SaleQty + 'px' }">销售数量</th>
							<th>当前库存</th>
						</tr>
					</thead>
				</table>
				<div style="overflow: auto;" id="ts">
					<table id="example" cellspacing="0" width="100%" v-if="classObject.active" class="table table-striped" >
						<tbody>
							<tr>
								<td v-if="resultTotalList.length==0" style="text-align:center;vertical-align:middle;">当前数据为空</td>
							</tr>
						</tbody>
						<tbody v-for="(value,index) in resultTotalList">
							<tr>
								<td class="btntogle MaterialID" :style="{ 'min-width': '185px', width: tdStyleLeft.MaterialID + 'px' }" data-btn="1">
									<div id="" class="btntogle2 MaterialID" :style="{ 'min-width': '50px', width: tdStyleLeft.MaterialIDWidth + 'px' }">
										<img src="../images/details_open.png" />{{value.MaterialID}}({{value.ColorName}})
									</div>
								</td>
								<td class="FactoryNo" :style="{ 'min-width': '50px', width: tdStyleLeft.FactoryNo + 'px' }">{{value.FactoryNo}}</td>
								<td class="VendCustName" :style="{ 'min-width': '50px', width: tdStyleLeft.VendCustName + 'px' }">{{value.VendCustName}}</td>
								<td class="DataText" :style="{ 'min-width': '50px', width: tdStyleLeft.DataText + 'px' }">{{value.DataText}}</td>
								<td class="SaleDate" :style="{ 'min-width': '90px', width: tdStyleLeft.SaleDate + 'px' }">{{value.SaleDate}}</td>
								<td class="SaleRate" :style="{ 'min-width': '70px', width: tdStyleLeft.SaleRate + 'px' }">{{value.SaleRate}}</td>
								<td class="RowNumber" :style="{ 'min-width': '70px', width: tdStyleLeft.RowNumber + 'px' }">{{value.RowNumber}}</td>
								<td class="SaleAmount" :style="{ 'min-width': '70px', width: tdStyleLeft.SaleAmount + 'px' }">{{value.SaleAmount}}</td>
								<td class="Discount" :style="{ 'min-width': '50px', width: tdStyleLeft.Discount + 'px' }">{{value.Discount}}</td>
								<td class="SaleQty" :style="{ 'min-width': '50px', width: tdStyleLeft.SaleQty + 'px' }">{{value.SaleQty}}</td>
								<td class="CostPrice" :style="{ 'min-width': '50px', width: tdStyleLeft.CostPrice + 'px' }">{{value.CostPrice}}</td>
								<td class="StockQty" :style="{ 'min-width': '50px', width: tdStyleLeft.StockQty + 'px' }">{{value.StockQty}}</td>
								<td class="ShopQty" style="color:red;">{{value.ShopQty}}</td>
							</tr>
							<tr class="sontable" style="background-color:#3F3F3F;color:white;">
								<th colspan="1" style="background-color: white;border: 0;padding:0;"></th>
								<th colspan="2" style="padding:0;">省份</th>
								<th colspan="2" style="padding:0;">仓库/店铺</th>
								<th colspan="1" style="padding:0;">上市日期</th>
								<th colspan="1" style="padding:0;">售罄率</th>
								<th colspan="1" style="padding:0;">销售金额</th>
								<th colspan="1" style="padding:0;">销售折扣</th>
								<th colspan="1" style="padding:0;">销售数量</th>
								<th colspan="2" style="padding:0;">当前库存</th>

							</tr>
							<tr class="sontable sontableheight" v-for="d in value.resultTotalProvList">
								<td colspan="1" style="background-color: white;border: 0;"></td>
								<td colspan="2">
									<div v-for="(c,index) in d" v-if="index==0" class="ProvinceCss">{{c.Province}}
										<p style="font-size: 10px;color: #337ab7;margin: 0px;">总库存：{{c.allQtys}}</p>
									</div>
								</td>
								<td colspan="2">
									<div v-for="c in d" :class="textColor(c.DataText)">{{c.DataText}}</div>
								</td>
								<td colspan="1">
									<div v-for="c in d">{{changku(c.DataText,c.SaleDate)}}</div>
								</td>
								<td colspan="1">
									<div v-for="c in d">{{changku(c.DataText,c.SaleRate)}}</div>
								</td>
								<td colspan="1">
									<div v-for="c in d">{{changku(c.DataText,c.SaleAmount)}}</div>
								</td>
								<td colspan="1">
									<div v-for="c in d">{{changku(c.DataText,c.Discount)}}</div>
								</td>
								<td colspan="1">
									<div v-for="c in d">{{changku(c.DataText,c.SaleQty)}}</div>
								</td>
								<td colspan="2">
									<div v-for="c in d" style="color:blue;">{{c.Qty}}</div>
								</td>
							</tr>
						</tbody>
					</table>
					<table id="example2" cellspacing="0" width="100%" v-if="classObject1.active" class="table table-striped" style="position: relative;">
						<tbody v-for="lists in resultDetailList">
							<tr v-for="(list,index) in lists">
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '65px', width: tdStyleRight.Province + 'px' }">
									{{list.Province}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.FactoryNo + 'px' }">
									{{list.FactoryNo}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '150px', width: tdStyleRight.StockName + 'px' }">
									{{list.StockName}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.StockType + 'px' }">
									{{list.StockType}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.ShopType + 'px' }">
									{{list.ShopType}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '150px', width: tdStyleRight.VendCustName + 'px' }">
									{{list.VendCustName}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '100px', width: tdStyleRight.MaterialID + 'px' }">
									{{list.MaterialID}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '50px', width: tdStyleRight.CostPrice + 'px' }">
									{{list.CostPrice}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.ColorName + 'px' }">
									{{list.ColorName}}
								</td>
								<td class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.SizeName + 'px' }">{{list.SizeName}}</td>
								<td class="listbox" :style="{ 'min-width': '65px', width: tdStyleRight.SaleDate + 'px' }">{{list.SaleDate}}</td>
								<td class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.SaleAmount + 'px' }">{{list.SaleAmount}}</td>
								<td class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.Discount + 'px' }">{{list.Discount}}</td>
								<td class="listbox" :style="{ 'min-width': '40px', width: tdStyleRight.SaleQty + 'px' }">{{list.SaleQty}}</td>
								<td class="listbox">{{list.Qty}}</td>
							</tr>
						</tbody>
					</table>
					<div style="position: absolute;bottom: 0;right:0;margin:0;display:none;padding-top: 10px;" id="pagebtns">
						<page></page>
					</div>
				</div>

			</div>
		</div>

		<script type="text/x-template" id="page">
			<ul class="pagination">
				<li v-show="current != 1" @click="current-- && goto(current--)">
					<a href="#">上一页</a>
				</li>
				<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
					<a href="#">{{index}}</a>
				</li>
				<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
					<a href="#">下一页</a>
				</li>
				<li>
					<a href="#">共{{allpage}}页</a>
				</li>
			</ul>
		</script>
	</body>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/plugins/layer/layDatev5.0.9/laydate.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8">
	</script>

<script type="text/javascript">

    var yearform, yearto;
    Vue.component("page", {
        template: "#page",
        data: function() {
            return {
                current: 1,
                showItem: 5,
                allpage: 1
            }
        },
        computed: {
            pages: function() {
                var pag = [];
                if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem, this.allpage);
                    while(i) {
                        pag.unshift(i--);
                    }
                } else { //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
                        i = this.showItem;
                    if(middle > (this.allpage - this.showItem)) {
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while(i--) {
                        pag.push(middle++);
                    }
                }
                return pag
            }
        },
        methods: {
            goto: function(index) {
                if(index == this.current) return;
                this.current = index;
                console.log(this.current)
                //这里可以发送ajax请求
                vm.requirePage(index);
            }
        }
    })

    var vm = new Vue({
        el: "#km",
        data: {
            inputData: {},
            pageCount: 0,
            OperationAreaList: [],
            selectedvendCustID: '',
            seasonID: '',
            modelID: '',
            VendCustID: '',
            selected: '',
            MatSeasonList: [],
            seasonselected: '',
            ShopNatureList: [],
            shopselected: '',
            MatSeriesList: [],
            seriesselected: '',
            MatModelList: [],
            modelselected: '',
            VendCustList: [],
            custselected: '',
            PeriodYearList: [],
            yearselected: '',
            tablelistsdata: [],
            resultTotalList: [],
            resultDetailList: [],
            querybtnData: {},
            classObject: {
                active: true,
            },
            classObject1: {
                active: false,
            },
            testList: [],
            qtys: 0,
            allSelect: '',
            getoperationAreaID: "",
            tdStyleLeft: {
                MaterialID: 185,
                FactoryNo: 77,
                VendCustName: 59,
                DataText: 59,
                SaleDate: 119,
                SaleRate: 85,
                RowNumber: 119,
                SaleAmount: 89,
                Discount: 77,
                SaleQty: 77,
                CostPrice: 59,
                StockQty: 77,
            },
            tdStyleRight: {
                Province: 86,
                FactoryNo: 47,
                StockName: 150,
                StockType: 59,
                ShopType: 59,
                VendCustName: 150,
                MaterialID: 150,
                CostPrice: 53,
                ColorName: 47,
                SizeName: 47,
                SaleDate: 86,
                SaleAmount: 59,
                Discount: 59,
                SaleQty: 59,
            }
        },
        watch: {
            selected: function(val, oldval) {
                console.log(val);
                this.allSelect += (val + ',');
                console.log(this.allSelect)
            },
        },
        methods: {
            getallQtys: function(c, i) {
                i == 0 ? this.qtys = c : this.qtys += c;
                return this.qtys;
                console.log(this.qtys)
            },
            changku: function(ct, x) {
                if(/仓库/.test(ct)) {
                    return "-";
                } else {
                    return x;
                }
            },
            textColor: function(t) {
                if(/正/.test(t)) {
                    return "text-color-green"
                } else if(/折/.test(t)) {
                    return "text-color-orange"
                } else {
                    return "text-color"
                }
            },
            changtable: function(n) {
                if(n == 0) {
                    this.classObject.active = true;
                    this.classObject1.active = false;
                    $("#pagebtns").hide();
                    $("#relaodbtns").show();
                    $("#relaodbtns2").hide();
                } else {
                    this.classObject.active = false;
                    this.classObject1.active = true;
                    $(".btntogle").css('background-image', 'url(../images/details_open.png)');
                    $(".btntogle").attr("data-btn", "1");
                    $("#pagebtns").show();
                    $("#relaodbtns").hide();
                    $("#relaodbtns2").show();
                }
            },
            requirePage: function(n) {
                vm.tablelistsdata = {};
                vm.resultTotalList = [];
                vm.resultDetailList = [];

                var a = layer.load(0, {
                    shade: false
                });
                var page;
                if(n) {
                    page = n;
                } else {
                    page = 1;
                }
                $("#OperationAreaList").val() ? this.getoperationAreaID = $("#OperationAreaList").val().toString() : "";
                $("#seasonID").val() ? this.seasonID = $("#seasonID").val().toString() : "";
                $("#modelID").val() ? this.modelID = $("#modelID").val().toString() : "";
                $("#VendCustID").val() ? this.VendCustID = $("#VendCustID").val().toString() : "";
                vm.querybtnData = {
                    "action": "GetVendCustSalesReport", //ExportVendCustSalesReport
                    "UserID": localStorage.getItem("UserID"),
//												"UserID": 4,
                    "vendCustID": vm.VendCustID,
                    "operationAreaID": vm.getoperationAreaID, //省份
                    "startDate": yearform, //启始时间
                    "endDate": yearto, //to时间
                    "periodYear": vm.yearselected, //年份
                    "seasonID": vm.seasonID, //季节
                    "seriesID": $('#seriesID option:selected').attr('seriesID'), //系列
                    "modelID": vm.modelID, //品类
                    "materialID": $('#materialID').val() || '',
                    "page": page,
                    "size": 100
                }
                console.log(vm.querybtnData)
                var dataArr = [];
//										$.post("http://192.168.10.90:8088/VendCust/VendCustHandler.ashx", vm.querybtnData,
                $.post("VendCustHandler.ashx", vm.querybtnData,
                    function(data) {
                        layer.close(a);
                        console.log(data)
                        if(data.Success == true) {
                            resizeDom();
                            vm.tablelistsdata = data.Data;
                            vm.$children[0]._data.allpage = vm.tablelistsdata.Count;
                            vm.resultTotalList = vm.tablelistsdata.resultTotalList;
                            $.each(vm.tablelistsdata.resultDetailList, function() {
                                this[0].rowlength = this.length;
                                vm.resultDetailList.push(this);
                            });
                            $.each(vm.tablelistsdata.resultTotalList, function() {
                                var _this = this;

                                $.each(_this.resultTotalProvList, function() {
                                    var _that = this;
                                    var allQtys = 0;
                                    $.each(_that, function() {
                                        allQtys += this.Qty;
                                    })
                                    _that[0].allQtys = allQtys;
                                })
                            })
                            console.log(vm.resultTotalList)
                            //
                            var exTBodyTotal = $("#exTable_bodyTotal");
                            var exTHeadTotal = $("#exTable_headTotal");

                            var exTBody = $("#exTable_body");
                            var exTHead = $("#exTable_head");

                            var exTBodyDetail = $("#exTable_bodyDetail");
                            var exTHeadDetail = $("#exTable_headDetail");

                            var exThMarkTotal = "<tr>";
                            exThMarkTotal += "<th>货号</th><th>工厂编号</th><th>供应商</th><th>范围</th><th>上市日期</th><th>售罄率</th><th>同品类销售排名</th><th>销售金额</th><th>销售折扣</th><th>销售数量</th><th>成本价</th><th>当前仓存</th><th>当前店存</th>";
                            exThMarkTotal += "</tr>";

                            var exInTHead = "<tr>";
                            exInTHead +=
                                "<th>货号</th><th>省份</th><th>仓库/店铺</th><th>上市日期</th><th>售罄率</th><th>销售金额</th><th>销售折扣</th><th>销售数量</th><th>当前库存</th>";
                            exInTHead += "</tr>";

                            var exInTHeadDetail = "<tr>";
                            exInTHeadDetail +=
                                "<th>省份</th><th>工厂编号</th><th>仓库</th><th>仓库类型</th><th>店铺性质</th><th>供应商</th><th>货号</th><th>成本价</th><th>颜色</th><th>上市日期</th><th>售罄率</th><th>尺码</th><th>销售金额</th><th>销售折扣</th><th>销售数量</th><th>当前库存</th>";
                            exInTHeadDetail += "</tr>";

                            exTHeadTotal.empty();
                            exTHeadTotal.append(exThMarkTotal);

                            exTHead.empty();
                            exTHead.append(exInTHead);

                            exTHeadDetail.empty();
                            exTHeadDetail.append(exInTHeadDetail);

                            if(data.Data.resultTotalList.length > 0) {

                                var exTbHtmlTotal = "";

                                var exTbHtml = "";

                                data.Data.resultTotalList.map(function(rtOutLi) {

                                    var materialID = rtOutLi.MaterialID;

                                    var exOutTBodyTotal = "<tr>";

                                    exOutTBodyTotal += "<td>" + materialID + "（" + rtOutLi.ColorName + "）</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.FactoryNo + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.VendCustName + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.DataText + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.SaleDate + "</td>";
                                    exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.SaleRate) ? '0.00' : (rtOutLi.SaleRate * 100).toFixed(2)) + "%</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.RowNumber + "</td>";
                                    exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.SaleAmount) ? '0.00' : rtOutLi.SaleAmount.toFixed(2)) + "</td>";
                                    exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.Discount) ? '0.00' : rtOutLi.Discount.toFixed(2)) + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.SaleQty + "</td>";
                                    exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.CostPrice) ? '0.00' : rtOutLi.CostPrice.toFixed(2)) + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.StockQty + "</td>";
                                    exOutTBodyTotal += "<td>" + rtOutLi.ShopQty + "</td>";

                                    exOutTBodyTotal += "</tr>";

                                    exTbHtmlTotal += exOutTBodyTotal;

                                    if(rtOutLi.resultTotalProvList.length > 0) {

                                        rtOutLi.resultTotalProvList.map(function(rtInList) {

                                            rtInList.map(function(rtInLi) {
                                                var exInTBody = "<tr>";
                                                exInTBody += "<td>" + materialID + "</td>";
                                                exInTBody += "<td>" + rtInList[0].Province + "</td>";
                                                exInTBody += "<td>" + rtInLi.DataText + "</td>";
                                                exInTBody += "<td>" + rtInLi.SaleDate + "%</td>";
                                                exInTBody += "<td>" + (Y.checkNull(rtInLi.SaleRate) ? '0.00' : (rtInLi.SaleRate * 100).toFixed(2)) + "%</td>";
                                                exInTBody += "<td>" + (Y.checkNull(rtInLi.SaleAmount) ? '0.00' : rtInLi.SaleAmount.toFixed(2)) + "</td>";
                                                exInTBody += "<td>" + (Y.checkNull(rtInLi.Discount) ? '0.00' : rtInLi.Discount.toFixed(2)) + "</td>";
                                                exInTBody += "<td>" + rtInLi.SaleQty + "</td>";
                                                exInTBody += "<td>" + rtInLi.Qty + "</td>";
                                                exInTBody += "</tr>";
                                                exTbHtml += exInTBody;

                                            });
                                        });
                                    }

                                });

                                exTBodyTotal.empty();
                                exTBodyTotal.append(exTbHtmlTotal);

                                exTBody.empty();
                                exTBody.append(exTbHtml);
                            } else {
                                exTHeadTotal.empty();
                                exTHeadTotal.append(exThMarkTotal);
                                var emptyTable = "<tr><td colspan='9'>暂无数据</td></tr>";
                                exTBodyTotal.empty();
                                exTBodyTotal.append(emptyTable);
                            }

                            if(data.Data.resultDetailList.length > 0) {

                                var exTbHtmlDetail = "";

                                data.Data.resultDetailList.map(function(rdList) {

                                    var rdLength = rdList.length;
                                    var firstRD = rdList[0];
                                    var exTBodyDetail = "<tr>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.Province + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.FactoryNo + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.StockName + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.StockType + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.ShopType + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.VendCustName + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.MaterialID + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.CostPrice + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.ColorName + "</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.SaleDate + "%</td>";
                                    exTBodyDetail += "<td rowspan='" + rdLength + "'>" + (Y.checkNull(firstRD.SaleRate) ? '0.00' : firstRD.SaleRate.toFixed(2)) + "%</td>";

                                    rdList.map(function(rdLi, index) {
                                        if(index > 0) {
                                            exTBodyDetail += "<tr>";
                                        }
                                        exTBodyDetail += "<td>" + rdLi.SizeName + "</td>";
                                        exTBodyDetail += "<td>" + (Y.checkNull(rdLi.SaleAmount) ? '0.00' : rdLi.SaleAmount.toFixed(2)) + "</td>";
                                        exTBodyDetail += "<td>" + (Y.checkNull(rdLi.Discount) ? '0.00' : rdLi.Discount.toFixed(2)) + "</td>";
                                        exTBodyDetail += "<td>" + rdLi.SaleQty + "</td>";
                                        exTBodyDetail += "<td>" + rdLi.Qty + "</td>";
                                        exTBodyDetail += "</tr>";
                                    });
                                    exTbHtmlDetail += exTBodyDetail;
                                });

                                exTBodyDetail.empty();
                                exTBodyDetail.append(exTbHtmlDetail);

                            } else {
                                var emptyTableDetail = "<tr><td colspan='13'>暂无数据</td></tr>";
                                exTBodyDetail.empty();
                                exTBodyDetail.append(emptyTableDetail);
                            }
                            vm.resizeTableLeft();
                            vm.resizeTableRight();
                        }
                        //

                    })
            },
            resizeTableLeft: function() {
                var trWidth = $("#km").width();
                var MaterialIDWidth = trWidth * 0.15;
                var FactoryNoWidth = trWidth * 0.065;
                var VendCustNameWidth = trWidth * 0.05;
                var SaleDateWidth = trWidth * 0.1;
                var SaleRateWidth = trWidth * 0.075;
                this.tdStyleLeft.MaterialID = MaterialIDWidth;
                this.tdStyleLeft.FactoryNo = FactoryNoWidth;
                this.tdStyleLeft.VendCustName = VendCustNameWidth;
                this.tdStyleLeft.DataText = VendCustNameWidth;
                this.tdStyleLeft.SaleDate = SaleDateWidth;
                this.tdStyleLeft.SaleRate = SaleRateWidth;
                this.tdStyleLeft.RowNumber = SaleDateWidth;
                this.tdStyleLeft.SaleAmount = SaleRateWidth;
                this.tdStyleLeft.Discount = FactoryNoWidth;
                this.tdStyleLeft.SaleQty = FactoryNoWidth;
                this.tdStyleLeft.CostPrice = VendCustNameWidth;
                this.tdStyleLeft.StockQty = FactoryNoWidth;
            },
            resizeTableRight: function() {
                var trWidth = $("#km").width();
                debugger;
                var ProvinceWidth = trWidth * 0.072;
                var FactoryNoWidth = trWidth * 0.04;
                var StockNameWidth = trWidth * 0.125;
                var StockTypeWidth = trWidth * 0.05;
                var CostPriceWidth = trWidth * 0.045;
                this.tdStyleRight.Province = ProvinceWidth;
                this.tdStyleRight.FactoryNo = FactoryNoWidth;
                this.tdStyleRight.StockName = StockNameWidth;
                this.tdStyleRight.StockType = StockTypeWidth;
                this.tdStyleRight.ShopType = StockTypeWidth;
                this.tdStyleRight.VendCustName = StockNameWidth;
                this.tdStyleRight.MaterialID = StockNameWidth;
                this.tdStyleRight.CostPrice = CostPriceWidth;
                this.tdStyleRight.ColorName = FactoryNoWidth;
                this.tdStyleRight.SizeName = FactoryNoWidth;
                this.tdStyleRight.SaleDate = ProvinceWidth;
                this.tdStyleRight.SaleAmount = StockTypeWidth;
                this.tdStyleRight.Discount = StockTypeWidth;
                this.tdStyleRight.SaleQty = StockTypeWidth;
            }
        }
    })
//				$.post("http://192.168.10.90:8088/VendCust/VendCustHandler.ashx", {
    $.post("VendCustHandler.ashx", {
            "action": "GetCondition",
//								"UserID": 4
            "UserID": localStorage.getItem("UserID")
        },
        function(data) {
            var sHtmls = "",
                seaHtmls = "",
                modelHtmls = "",
                vendHtmls = "";
            //供应商
            $.each(data.Data.VendCustList, function() {
                var vHtml = "<option value=" + this.VendCustID + ">" + this.VendCustName + "</option>";
                vendHtmls += vHtml;
            })
            $('#VendCustID').append(vendHtmls)
            //省份
            $.each(data.Data.OperationAreaList, function() {
                var sHtml = "<option value=" + this.AreaID + ">" + this.AreaName + "</option>";
                sHtmls += sHtml;
            })
            $('#OperationAreaList').append(sHtmls)

            //季节多选
            $.each(data.Data.MatSeasonList, function() {
                var seaHtml = "<option value=" + this.SeasonID + ">" + this.SeasonName + "</option>";
                seaHtmls += seaHtml;
            })
            $("#seasonID").append(seaHtmls);
            //品类多选modelID
            $.each(data.Data.MatModelList, function() {
                var modelHtml = "<option value=" + this.ModelID + ">" + this.ModelName + "</option>";
                modelHtmls += modelHtml;
            })
            $("#modelID").append(modelHtmls);

            $(document).ready(function() {
                var s = $('#OperationAreaList').multiselect({
                    buttonWidth: '50%',
                    numberDisplayed: 5,
                    includeSelectAllOption: true,
                    selectAllText: '全选',
                    nSelectedText: '个被选中',
                    nonSelectedText: '多选',
                    maxHeight: 400,
                });

                var sea = $('#seasonID').multiselect({
                    buttonWidth: '50%',
                    numberDisplayed: 5,
                    includeSelectAllOption: true,
                    selectAllText: '全选',
                    nSelectedText: '个被选中',
                    nonSelectedText: '多选',
                    maxHeight: 400,
                });

                var mol = $('#modelID').multiselect({
                    buttonWidth: '50%',
                    numberDisplayed: 5,
                    includeSelectAllOption: true,
                    selectAllText: '全选',
                    nSelectedText: '个被选中',
                    nonSelectedText: '多选',
                    maxHeight: 400,
                });
                var vend = $('#VendCustID').multiselect({
                    buttonWidth: '50%',
                    includeSelectAllOption: true,
                    selectAllText: '全选',
                    nSelectedText: '个被选中',
                    nonSelectedText: '多选',
                    maxHeight: 400,
                });

            });

            console.log(data)
            vm.inputData = data.Data;
            vm.OperationAreaList = vm.inputData.OperationAreaList;
            vm.MatSeasonList = vm.inputData.MatSeasonList;
            vm.ShopNatureList = vm.inputData.ShopNatureList;
            vm.MatSeriesList = vm.inputData.MatSeriesList;
            vm.MatModelList = vm.inputData.MatModelList;
            vm.VendCustList = vm.inputData.VendCustList;
            vm.PeriodYearList = vm.inputData.PeriodYearList;
        })

    //layerdata

    //获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if(month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if(strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    //年份
    var beforyear = laydate.render({
        elem: '#test0',
        type: 'date',
        value: '2017-12-10',
        done: function(value, date, endDate) {
            console.log(value);
            yearform = value;
        }
    });
    yearform = beforyear.config.value;
    var afteryear = laydate.render({
        elem: '#test1',
        type: 'date',
        value: getNowFormatDate(),
        done: function(value, date, endDate) {
            console.log(value);
            yearto = value;
        }
    });
    yearto = afteryear.config.value;
    //查询按钮
    $('#query').click(function() {
        vm.requirePage();
    });


    $("#example").on('click', '.btntogle', function() {
        var bgDom = $(this);
        if(bgDom.attr("data-btn") == 1) {
            bgDom.find('img').attr("src", "../images/details_close.png")
            bgDom.attr("data-btn", "0");
        } else {
            bgDom.find('img').attr("src", "../images/details_open.png")
            bgDom.attr("data-btn", "1");
        }
        bgDom.parent().parent().find('.sontable').toggle();
    });

    var resizeDom = function() {
        var boxh = $(window).height() - $(".breadcrumb").height() * 2 - $(".selectheader").height() - $(".nav-pills").height() - $("#pagebtns").height() - 35;
        $("#ts").height(boxh);
    }

    $(window).resize(function() {
        resizeDom();
        vm.resizeTableLeft();
        vm.resizeTableRight();
    })
    resizeDom();

    var exportReportDetail = function() {
        var exportLayer = layer.load(0, {
            shade: false
        });
        var sendData = vm.querybtnData;
        sendData.action = "ExportVendCustSalesReport";
//						$.post("http://192.168.10.90:8088/VendCust/VendCustHandler.ashx", sendData,
        $.post("VendCustHandler.ashx", sendData,
            function(data) {
                layer.close(exportLayer);
                console.log(data)
                if(data.Success) {
                    outExcle(data.Data);
                } else {
                    layer.alert(data.Message, {
                        icon: 1,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                }
            });
    }
</script>

</html>